import { Fragment } from "react/jsx-runtime";
import HeadingType from "../../types";

interface Props {
  headings: HeadingType[];
  activeId: string;
}
function Headings({ headings, activeId }: Props) {
  function scrollIntoView(target: Element) {
    target.scrollIntoView({ behavior: "smooth" });
  }
  return (
    <ul className="toc">
      {headings.map((item) => (
        <Fragment key={item.id}>
          <li
            className={activeId === item.id ? "highlight" : ""}
            onClick={() => scrollIntoView(item.target)}
          >
            {item.title}
          </li>
          {item.items.length > 0 && (
            <ul>
              {item.items.map((child) => (
                <li
                  className={activeId === child.id ? "highlight" : ""}
                  key={child.id}
                  onClick={() => scrollIntoView(child.target)}
                >
                  {child.title}
                </li>
              ))}
            </ul>
          )}
        </Fragment>
      ))}
    </ul>
  );
}

export default Headings;
